<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no" />
		<title></title>
		<link href="../c/lookanchor.css" type="text/css" rel="stylesheet" />
	</head>
	<style type="text/css">
		.anchor_list p:nth-of-type(1) span {
			display: none;
		}

		.anchor_list p:nth-of-type(1) {}

		.ims {
			position: fixed;
			top: 25%;
			left: 46%;
			width: 10%;
			display: none;
			animation: rotate 3s linear infinite;
		}

		@keyframes rotate {
			0% {
				transform: rotate(0);
			}

			50% {
				transform: rotate(200deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}
	</style>

	<body>
		<div class="main">
			<!-- <header>
				<a href="java:"><img src="../i/right-bai.png"></a>
				<p>找主播</p>
				<img src="../i/sou.png">
			</header> -->
			<div class="soso">
				<div class="qy">
					<p class="qy_p qys"><span name="0">区域</span><small></small></p>
					<div class="qy_div quy">
						<!-- <p name="1">渝中区</p>
						<p name="2">九龙坡区</p>
						<p name="3">万州区</p>
						<p name="4">沙坪坝区</p>
						<p name="5">南岸区</p> -->
					</div>
				</div>
				<div class="qy">
					<p class="qy_p pts"><span name="0">常驻平台</span><small></small></p>
					<div class="qy_div pta">
						<!-- <p name="1">斗鱼tv</p>
						<p name="2">虎牙tv</p>
						<p name="3">战旗tv</p>
						<p name="4">快手直播</p> -->
					</div>
				</div>
				<div class="qy">
					<p class="qy_p jzs"><span name="0">商业价值</span><small></small></p>
					<div class="qy_div jza">
						<!--<p name="1">0-50</p>
						<p name="2">50-100</p>
						<p name="3">100-150</p>
						<p name="4">150-200</p> -->
					</div>
				</div>
				<div class="qy">
					<p class="qy_p lxs"><span name="0">人设类型</span><small></small></p>
					<div class="qy_div lxa">
						<!-- <p name="1">电商</p>
						<p name="2">网红</p>
						<p name="3">带货强人</p> -->
					</div>
				</div>
			</div>
			<div class="anchor">
				<!-- <div class="anchor_list" onclick="_url({url:'anchormain',title:'冷轩'})">
					<p style="background: url(http://www.bobutong.com/upload/2018-12/06/xiaotianxinxixiyafengmian2.png) no-repeat  center center;background-size:auto 100%;"><span>直播中</span></p>
					<P>艺名:小甜心嘻嘻呀</P>
					<P>商业价值:12</P>
					<P>常驻平台:抖音直播</P>
					<div class="spans"><span>娱乐主播</span><span>带货50强</span><span>好评90%</span></div>
				</div>
				<div class="anchor_list" onclick="_url({url:'anchormain',title:'甜成橙'})">
					<p style="background: url(http://www.bobutong.com/upload/2018-11/21/xiaojiebafengmian2.png) no-repeat  center center;background-size:auto 100%;"><span>直播中</span></p>
					<P>艺名:小结巴</P>
					<P>商业价值:50</P>
					<P>常驻平台:抖音直播</P>
					<div class="spans"><span>娱乐主播</span><span>带货50强</span><span>好评90%</span></div>
				</div>
				<div class="anchor_list" onclick="_url({url:'anchormain',title:'甜成橙'})">
					<p style="background: url(http://www.bobutong.com/upload/2018-11/21/muyaofengmian2.png) no-repeat  center center;background-size:auto 100%;"><span>直播中</span></p>
					<P>艺名:木瑶</P>
					<P>商业价值:99</P>
					<P>常驻平台:抖音直播</P>
					<div class="spans"><span>娱乐主播</span><span>带货50强</span><span>好评90%</span></div>
				</div>
				<div class="anchor_list" onclick="_url({url:'anchormain',title:'甜成橙'})">
					<p style="background: url(http://www.bobutong.com/upload/2018-11/07/zouzainulifengmian2.png) no-repeat  center center;background-size:auto 100%;"><span>直播中</span></p>
					<P>艺名:邹喵喵在努力</P>
					<P>商业价值:600</P>
					<P>常驻平台:抖音直播</P>
					<div class="spans"><span>娱乐主播</span><span>带货50强</span><span>好评90%</span></div>
				</div>
				<div class="anchor_list" onclick="_url({url:'anchormain',title:'甜成橙'})">
					<p style="background: url(http://www.bobutong.com/upload/2018-10/31/tingtingxiaoguliangfengmian2.png) no-repeat  center center;background-size:auto 100%;"><span>直播中</span></p>
					<P>艺名:亭亭小菇凉</P>
					<P>商业价值:521</P>
					<P>常驻平台:抖音直播</P>
					<div class="spans"><span>娱乐主播</span><span>带货50强</span><span>好评90%</span></div>
				</div>
				<div class="anchor_list" onclick="_url({url:'anchormain',title:'甜成橙'})">
					<p style="background: url(http://www.bobutong.com/upload/2018-10/31/tianchengchengfengmian2.png) no-repeat  center center;background-size:auto 100%;"><span>直播中</span></p>
					<P>艺名:甜成橙</P>
					<P>商业价值:521</P>
					<P>常驻平台:抖音直播</P>
					<div class="spans"><span>娱乐主播</span><span>带货50强</span><span>好评90%</span></div>
				</div> -->
			</div>
			<p style="width: 100%;float: left;text-align: center;color: #fff;margin-top: 2rem;display: none;" class="more">暂无更多</p>
		</div>
		<img src="../i/footer_progress.png" class="ims">
	</body>
</html>
<script src="../j/api.js"></script>
<script src="../j/jquery-3.3.1.min.js"></script>
<script>
	var page = 1;
	// 区域
	var quyu = 0;
	// 平台
	var pt = 0;
	// 价值
	var jz = 0;
	//类型
	var lx = 0;

	function list(pages, quyu, pt, jz, lx) {
		var htm = $(".anchor").html();
		$(".ims").show();
		_ajax("index/zhubolists", function(ret, err) {
			console.log(JSON.stringify(ret));
			if (ret) {
				state = true;
				if (ret.ret.length >= 1) {
					var tpl = '';
					for (var i = 0; i < ret.ret.length; i++) {
						tpl += '<div class="anchor_list" id="' + ret.ret[i].id + '">';
						tpl += '<p style="background: url(http://qiniu.live.kxg99.com/' + ret.ret[i].img_l +
							') no-repeat  center center;background-size:100% auto;"><span>直播中</span></p>';
						tpl += '<P>艺名:' + ret.ret[i].roomName + '</P>';
						tpl += '<P>商业价值:' + ret.ret[i].jz + '</P>';
						tpl += '<P>常驻平台:' + ret.ret[i].pt + '</P>';
						tpl += '<div class="spans"><span>' + ret.ret[i].lx + '</span></div>';
						tpl += '</div>';
					}
					$(".ims").hide();

					$(".anchor").html(htm + tpl);
				} else {
					$(".ims").hide();
					$(".more").show();
				}
			} else {
				$(".ims").hide();
			}
		}, {
			page: pages,
			quyu: quyu,
			pt: pt,
			jz: jz,
			lx: lx
		})
	}

	apiready = function() {
		list(page, quyu, pt, jz, lx);

		api.addEventListener({
			name: 'scrolltobottom',
			extra: {
				threshold: 150 //设置距离底部多少距离时触发，默认值为0，数字类型
			}
		}, function(ret, err) {
			var quyu = $(".qys span").attr("name");
			var pt = $(".pts span").attr("name");
			var jz = $(".jzs span").attr("name");
			var lx = $(".lxs span").attr("name");

			page++;
			console.log(page + "/" + quyu + "/" + pt + "/" + jz + "/" + lx);
			list(page, quyu, pt, jz, lx);
		})
		
		
		// $(window).scroll(function() {
		// 	var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)  
		// 	totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
		// 	var quyu = $(".qys span").attr("name");
		// 	var pt = $(".pts span").attr("name");
		// 	var jz = $(".jzs span").attr("name");
		// 	var lx = $(".lxs span").attr("name");
		// 	if (($(document).height() - srollPos) <= totalheight) {
		// 		// page+=1;
		// 		if (state == true) {
		// 			state = false;
		// 			page++;
		// 			list(page, quyu, pt, jz, lx);
		// 		}
		// 	}
		// })
		//展开下拉
		$(".qy_p").on("click", function() {
			$(".qy_div").hide();
			$(".qy_p small").css("border-bottom", "0px solid #fff");
			$(".qy_p small").css("border-top", "8px solid #fff");
			$(this).siblings(".qy_div").show();
			$(this).children("small").css("border-top", "0px solid #fff");
			$(this).children("small").css("border-bottom", "8px solid #fff");
		})
		//跳页
		$(".anchor").on("click", ".anchor_list", function() {
			// alert("ss");
			var id = $(this).attr("id");
			// alert(id)
			localStorage.setItem("zbID", id);
			_url({
				url: 'anchormain',
				title: '主播详情'
			});
		})
		//选择下拉内容
		$(".qy_div").on("click", "p", function() {
			// $(this).parent(".qy_div").siblings(".qy_p").children("span").text($(this).text());
			// $(".qy_div").hide();
			$(".anchor").html(" ");
			var name = $(this).attr("name");
			$(this).parent(".qy_div").siblings(".qy_p").children("span").attr("name", name);
			$(this).parent(".qy_div").siblings(".qy_p").children("span").text($(this).text());
			$(".qy_div").hide();
			page = 1;
			var quyu = $(".qys span").attr("name");
			var pt = $(".pts span").attr("name");
			var jz = $(".jzs span").attr("name");
			var lx = $(".lxs span").attr("name");
			list(page, quyu, pt, jz, lx);
		})
		//区域
		_ajax("index/quyu", function(ret, err) {
			console.log(JSON.stringify(ret))
			if (ret) {
				if (ret.ret.length > 0) {
					var tpl = '';
					for (var i = 0; i < ret.ret.length; i++) {
						tpl += '<p name="' + ret.ret[i].id + '">' + ret.ret[i].title + '</p>';
					}
					$(".quy").html(tpl);
				}
			}
		})
		//平台
		_ajax("index/pt", function(ret, err) {
			if (ret) {
				if (ret.ret.length > 0) {
					var tpl = '';
					for (var i = 0; i < ret.ret.length; i++) {
						tpl += '<p name="' + ret.ret[i].id + '">' + ret.ret[i].title + '</p>';
					}
					$(".pta").html(tpl);
				}

			}
		})
		//价值
		_ajax("index/jz", function(ret, err) {
			if (ret) {
				if (ret.ret.length > 0) {
					var tpl = '';
					for (var i = 0; i < ret.ret.length; i++) {
						tpl += '<p name="' + ret.ret[i].id + '">' + ret.ret[i].title + '</p>';
					}
					$(".jza").html(tpl);
				}
			}
		})
		//人设类型
		_ajax("index/lx", function(ret, err) {
			if (ret) {
				if (ret.ret.length > 0) {
					var tpl = '';
					for (var i = 0; i < ret.ret.length; i++) {
						tpl += '<p name="' + ret.ret[i].id + '">' + ret.ret[i].title + '</p>';
					}
					$(".lxa").html(tpl);
				}

			}
		})

	}
</script>
